<template>
  <div>
    <ul>
        <li v-for="mess in messages" :key="mess.id">
            <!-- 如果要在标签里进行js运算就要用到``符号 -->
            <router-link :to="`/luyou/message/detail/${mess.id}`">{{mess.title}}</router-link>
        </li>
    </ul>
    <div>
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      messages: []
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {
    // 模拟异步回调
    setTimeout(() => {
      const message = [
        {
          id: 1,
          title: "标题1"
        },
        {
          id: 2,
          title: "标题2"
        },
        {
          id: 3,
          title: "标题3"
        },
        {
          id: 4,
          title: "标题4"
        }
      ];
      this.messages = message;
    }, 1000);
  }
};
</script>
<style scoped>
</style>